import React, { Component } from 'react';

class Menu extends Component {

    constructor(props){

        super(props);

        let icon = 'icon iconfont '+this.props.icon;
        let color = this.props.iconColor;


        this.state = {
            icon:icon,
            color:color,
        }


    }

    to(e){

        this.props.history.push(this.props.to);

        return;

    }
    
    render() {

        let border = {
            borderBottom: "solid 1px #d9d9d9"
        }

        if(this.props.border === '1'){
            border={}
        }


        return (
            <div onClick={(e)=>this.to(e)} className="user-menu">
                <div className="user-menu-wrapper">
                    <div className="user-menu-left">
                        <i style={{"color":this.state.color}} className={this.state.icon}></i>
                    </div>
                    <div style={border} className="user-menu-right">
                        <span className="user-menu-name">{this.props.name}</span>
                        <i style={{position:'absolute', 'right':0}} className="icon iconfont icon-to_light"></i>
                    </div>
                </div>
            </div>
        );
    }
}

export default Menu;